var labelType, useGradients, nativeTextSupport, animate;


(function() {
	var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i)
			|| ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport
			&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
	// I'm setting this based on the fact that ExCanvas provides text support
	// for IE
	// and that as of today iPhone/iPad current text support is lame
	labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native'
			: 'HTML';
	nativeTextSupport = labelType == 'Native';
	useGradients = nativeCanvasSupport;
	animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
	elem : false,
	write : function(text) {
		if (!this.elem)
			this.elem = document.getElementById('log');
		this.elem.innerHTML = text;
		this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
	}
};

function drawRelation(currUserName,relatedUsers) {

	// init data
	var json = [ {
		"adjacencies" : [ {
			"nodeTo" : "graphnode2",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[0].userSim * 10,
				"$overridable" : true} 
		}, {
			"nodeTo" : "graphnode3",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[1].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode4",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[2].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode5",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[3].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode6",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[4].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode7",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[5].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode8",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[6].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode9",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[7].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode10",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[8].userSim * 10,
				"$overridable" : true}
		}, {
			"nodeTo" : "graphnode11",
			"nodeFrom" : "graphnode1",
			"data":{
				"$color" : "#EBB056",
				"$lineWidth" : relatedUsers[9].userSim * 10,
				"$overridable" : true}
		} ],
		"data" : {
			"$color" : "#83548B",
			"$type" : "star",
			"$dim" : "15",
		},
		
		"id" : "graphnode1",
		"name" : currUserName,
//		"$lineWidth":"4.0",
	}, {	
		"data" : {
			"$color" : "#EBB056",
			"$type" : "circle"
		},
		
		"id" : "graphnode2",
		"name" : "<a href='#relatedUser1Url'>" + relatedUsers[0].userName + "<br/>(相似度：0" + relatedUsers[0].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#70A35E",
			"$type" : "circle"
		},
		"id" : "graphnode3",
		"name" : "<a href='#relatedUser1Ur2'>" +  relatedUsers[1].userName + "<br/>(相似度：0" + relatedUsers[1].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#70A35E",
			"$type" : "circle"
		},
		"id" : "graphnode4",
		"name" : "<a href='#relatedUser1Ur3'>" +  relatedUsers[2].userName + "<br/>(相似度：0" + relatedUsers[2].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#416D9C",
			"$type" : "circle"
		},
		"id" : "graphnode5",
		"name" : "<a href='#relatedUser1Ur4'>" +  relatedUsers[3].userName + "<br/>(相似度：0" + relatedUsers[3].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#416D9C",
			"$type" : "circle"
		},
		"id" : "graphnode6",
		"name" : "<a href='#relatedUser1Ur5'>" +  relatedUsers[4].userName + "<br/>(相似度：0" + relatedUsers[4].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#416D9C",
			"$type" : "circle"
		},
		"id" : "graphnode7",
		"name" : "<a href='#relatedUser1Ur6'>" +  relatedUsers[5].userName + "<br/>(相似度：0" + relatedUsers[5].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#EBB056",
			"$type" : "circle"
		},
		"id" : "graphnode8",
		"name" : "<a href='#relatedUser1Ur7'>" +  relatedUsers[6].userName + "<br/>(相似度：0" + relatedUsers[6].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#70A35E",
			"$type" : "circle"
		},
		"id" : "graphnode9",
		"name" : "<a href='#relatedUser1Ur8'>" +  relatedUsers[7].userName + "<br/>(相似度：0" + relatedUsers[7].userSim + ")</a>"
	}, {
		"data" : {
			"$color" : "#83548B",
			"$type" : "circle"
		},
		"id" : "graphnode10",
		"name" : "<a href='#relatedUser1Ur9'>" +  relatedUsers[8].userName + "<br/>(相似度：0" + relatedUsers[8].userSim + ")</a>"
	},{
		"data" : {
			"$color" : "#83548B",
			"$type" : "circle"
		},
		"id" : "graphnode11",
		"name" : "<a href='#relatedUser1Url0'>" +  relatedUsers[9].userName + "<br/>(相似度：0" + relatedUsers[9].userSim + ")</a>"
	}];
	// end
	// init ForceDirected
	var fd = new $jit.ForceDirected({
		// id of the visualization container
		injectInto : 'infovis',
		// Enable zooming and panning
		// with scrolling and DnD
		Navigation : {
			enable : true,
			type : 'HTML',
			// Enable panning events only if we're dragging the empty
			// canvas (and not a node).
			panning : 'avoid nodes',
			zooming : 8
		// zoom speed. higher is more sensible
		},
		// Change node and edge styles such as
		// color and width.
		// These properties are also set per node
		// with dollar prefixed data-properties in the
		// JSON structure.
		Node : {
			overridable : true,
			dim : 7
		},
		Edge : {
			overridable : true,
			color : '#23A4FF',
			lineWidth : 2.0
		},
		// Add node events
		Events : {
			enable : true,
			type : 'HTML',
			// Change cursor style when hovering a node
			onMouseEnter : function() {
				fd.canvas.getElement().style.cursor = 'move';
			},
			onMouseLeave : function() {
				fd.canvas.getElement().style.cursor = '';
			},
			// Update node positions when dragged
			onDragMove : function(node, eventInfo, e) {
				var pos = eventInfo.getPos();
				node.pos.setc(pos.x, pos.y);
				fd.plot();
			},
			// Implement the same handler for touchscreens
			onTouchMove : function(node, eventInfo, e) {
				$jit.util.event.stop(e); // stop default touchmove event
				this.onDragMove(node, eventInfo, e);
			}
		},
		// Number of iterations for the FD algorithm
		iterations : 200,
		// Edge length
		levelDistance : 120,
		// This method is only triggered
		// on label creation and only for DOM labels (not native canvas ones).
		onCreateLabel : function(domElement, node) {
			// Create a 'name' and 'close' buttons and add them
			// to the main node label
			var nameContainer = document.createElement('span'),
			// closeButton = document.createElement('span'),
			style = nameContainer.style;
			nameContainer.className = 'name';
			nameContainer.innerHTML = node.name;
			// closeButton.className = 'close';
			// closeButton.innerHTML = 'x';
			domElement.appendChild(nameContainer);
			// domElement.appendChild(closeButton);
			style.fontSize = "0.8em";
			style.color = "#9c2eaf";
			// Fade the node and its connections when
			// clicking the close button
			/*
			 * closeButton.onclick = function() { node.setData('alpha', 0,
			 * 'end'); node.eachAdjacency(function(adj) { adj.setData('alpha',
			 * 0, 'end'); }); fd.fx.animate({ modes: ['node-property:alpha',
			 * 'edge-property:alpha'], duration: 500 }); };
			 */
			// Toggle a node selection when clicking
			// its name. This is done by animating some
			// node styles like its dimension and the color
			// and lineWidth of its adjacencies.
			nameContainer.onclick = function() {};
		},
		// Change node styles when DOM labels are placed
		// or moved.
		onPlaceLabel : function(domElement, node) {
			var style = domElement.style;
			var left = parseInt(style.left);
			var top = parseInt(style.top);
			var w = domElement.offsetWidth;
			style.left = (left - w / 2) + 'px';	
			style.top = (top + 10) + 'px';
			style.display = '';
		}
	});
	// load JSON data.
	fd.loadJSON(json);
	// compute positions incrementally and animate.
	fd.computeIncremental({
		iter : 40,
		property : 'end',
		onStep : function(perc) {
//			Log.write(perc + '% loaded...');
		},
		onComplete : function() {
//			Log.write('done');
			fd.animate({
				modes : [ 'linear' ],
				transition : $jit.Trans.Elastic.easeOut,
				duration : 2500
			});
		}
	});
	// end
}
/**
 * 利用jit工具做bar图
 */
function drawClickRecord(){
	
	var topClickedSpots = getTopClickedCookies();
	if(topClickedSpots==null || topClickedSpots.length<1){
		
		$("#log").html("<font color='red'>您本次在本站还没有浏览记录，<br/>欢迎使用本系统，<br>发现你想去景点与服务</font>");
		return;
	}
	var topClickedSpotsName = new Array();
	var topClickedSpotsValue = new Array();
	
	for(var i=0;i<topClickedSpots.length;i++){
		
//		var valueArr = [topClickedSpots[i].clickRecords];
		topClickedSpotsName.push(topClickedSpots[i].spotName.substring(5));
//		var ent = {"label":topClickedSpots[i].spotName,"values":valueArr};
		topClickedSpotsValue.push(topClickedSpots[i].clickRecords);
//		topClickedSpots1[i] = ent;
		
	}
	
    var myChart = echarts.init(document.getElementById('log'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '用户浏览统计数据'
        },
        tooltip: {},
        xAxis: {
            data: topClickedSpotsName,
            axisLabel:{
            	rotate:90,
            	interval:0
            }
        },
        yAxis: {},
        series: [{
            name: '浏览次数',
            type: 'bar',
            data: topClickedSpotsValue
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
	
}
	
